import logo from './logo.svg';
import './App.css';

function App() {
  let name = 'Jack';
  let hasWude = false;
  // 不能直接在react中显示对象，可以转为数组、显示某个属性值、或转成字符串格式
  let list = [
    { name: 'Tom', age: 18 },
    { name: 'Jane', age: 19 },
    { name: 'Jack', age: 20 },
  ];
  let className1 = 'blue';
  let val1 = '666';
  let style1 = { color: 'red', fontSize: '40px' };
  let type1 = 'password';
  return (
    <div className="App">
      <header className="App-header">
        <div>修改标签内容：{name}</div>
        <div>修改标签内容：{1 + 2}---{hasWude ? '' : '不'}讲武德</div>
        <div>修改标签内容：{JSON.stringify(list)}</div>
        <hr></hr>
        {/* 在jsx的语法中，html的类名class要写成className，js中的class还写成class */}
        <div className={className1}>修改我的class</div>
        {/* 在jsx的语法中，style的类型需要是对象，所以需要两个花括号。
        多个单词的属性名要写成：fontSize */}
        <div style={{ color: 'red', fontSize: '40px' }}>修改我的style</div>
        <div style={style1}>修改我的style</div>
        {/* 在jsx的语法中，带有{}的就是js的变量，带有<>就是html */}
        <input type={type1} qwer={val1} />
        <p>
          JSX的基本语法：
          1. 注释放在花括号中
          2. 数据渲染的方式
        </p>
        <div>条件渲染：简单的用三元表达式写，复杂的用if..else</div>
        <div>
          {
            (function () {
              if (hasWude) {
                return (<p>666</p>)
              } else {
                return (<p>555</p>)
              }
            })()
          }
        </div>
        <div>循环渲染，类似vue的v-for。使用map方法实现</div>
        <ul>
          {
            list.map(item => {
              return (<li key={item.name}>{item.name}---{item.age}</li>)
            })
          }
        </ul>
        {/* 
          1  遇到 <>,JSX 就解析成 HTML;遇到 {}按 JavaScript 解析。
          2  虚拟 DOM 只允许有一个根节点
          3  JSX 标签可以相互嵌套注意换行和缩进,增强代码的可读性
          4  建议使用小括号括将 JSX 代码括起来 ,防止分号自动插入的 bug
          5  通过 JSX 语法将数据绑定到虚拟 DOM 对象(是一个js的object),再通过 render 将数据渲染到真实 DOM 
        */}
      </header>
    </div>
  );
}

export default App;
